
var myChart0,myChart1,myChart3,myChart4,myChart5;



myChart0 = echarts.init(document.getElementById('data-center-bottom'));
myChart1 = echarts.init(document.getElementById('body-top-left-top-left'));
myChart2 = echarts.init(document.getElementById('body-top-left-top-right'));
myChart3 = echarts.init(document.getElementById('body-left-down-left'));
myChart4 = echarts.init(document.getElementById('body-left-down-right'));
myChart5 = echarts.init(document.getElementById('body-top-right-down-table'));



/*执行函数，将确定的图形绘制到界面*/
f_body_down();
f_body_top_left_first();
f_body_top_left_second();
f_body_top_left_third();
f_body_top_left_forth();
f_body_top_right();


//body下面的整体部分
function f_body_down() {

    myChart0.showLoading();      //加载的时候开启加载动画
    var positions = [];          //位置
    var people_sum = [];        //总人数
    var work_people = [];        //工作人数
    var bad_people = [];         //残疾人数

    var option;


    $.ajax({
        type: 'get',
        url: 'json/data-center-body-down.json',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result.list, function (index, item) {
                positions.push(item.positions);
                people_sum.push(item.people_sum);
                work_people.push(item.work_people);
                bad_people.push(item.bad_people)

                option = {
                    title:{

                    },
                    tooltip:{

                    },
                    legend:{

                        right:125,
                        top:20,



                    },
                    grid:{
                        show:false,
                        left:50,
                        right:50,
                    },
                    xAxis:{
                        data:positions
                    },
                    yAxis:{
                        show:false,
                    },
                    series:[
                        {
                            name: '总人数',
                            type: 'bar',
                            data: people_sum,
                            label: {
                                position: ['top', 'right']
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#696646'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        },
                        {
                            name:'劳动力人数',
                            type:'bar',
                            data:work_people,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#2E7146'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }

                        },
                        {
                            name:'残疾人数',
                            type:'bar',
                            data:bad_people,
                            label:{
                              color:'#fff'
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#03666B'
                                        ];
                                        return colorList[params.dataIndex]
                                    },


                                }
                            }

                        }
                    ]

                };              //设置显示图形

            });


            myChart0.hideLoading();    //隐藏加载动画
            myChart0.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart0.hideLoading();
        }
    });


}


function  f_body_top_left_first() {
    //设置第一个圆形


    myChart1.showLoading();    //数据加载完之前先显示一段简单的loading动画
    $.ajax({
        type: 'get',
        url: 'json/data-center-body-top-first.json',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象


            var option = {
                title: {
                    text: '乡镇幅员面积',
                    x: 'center',
                    y: 'center',
                    textStyle : {
                        color : 'rgba(30,144,255,0.5)',
                        fontFamily : '微软雅黑',
                        fontSize : 14,
                        fontWeight : 'bolder',
                    }

                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                grid:{
                    show:false,
                    left:0,
                    right:-100,
                    top:'5%',
                    bottom:'5%',

                },
                calculable : true,
                series : [
                    {
                        name:'数据',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        'rgba(183,5,0,1)','rgba(193,100,0,1)','rgba(0,77,112,1)','rgba(126,0,12)',
                                        'rgba(168,0,75,1)','rgba(168,0,138,1)','rgba(191,0,220,1)','rgba(160,0,184,1)',
                                        'rgba(95,0,184,1)','rgba(30,0,184,1)','rgba(0,86,216,1)','rgba(0,155,196,1)',
                                        'rgba(0,184,196,1)','rgba(0,96,132,1)','rgba(0,121,83,1)','rgba(0,169,115,1)'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                        },
                        tooltip:{
                            position: function (pos, params, dom, rect, size) {
                                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                                var obj = {top: 80};
                                obj[['right', 'left'][+(pos[0] < size.viewSize[0] / 2)]] = 70;
                                return obj;
                            }
                        },
                        data:result.list,
                    }

                ]
            };


            myChart1.hideLoading();    //隐藏加载动画
            myChart1.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart1.hideLoading();
        }
    });




}


function f_body_top_left_second() {
    //设置第二个圆


    myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画

    $.ajax({
        type: 'get',
        url: 'json/data-center-body-top-first.json',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象


            var option = {
                title: {
                    text: '乡镇幅员面积',
                    x: 'center',
                    y: 'center',
                    textStyle : {
                        color : 'rgba(30,144,255,0.5)',
                        fontFamily : '微软雅黑',
                        fontSize : 14,
                        fontWeight : 'bolder',
                    }

                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                grid:{
                    show:false,
                    left:0,
                    right:-100,
                    top:'5%',
                    bottom:'5%',

                },
                calculable : true,
                series : [
                    {
                        name:'数据',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#b60000','#c16400','#004d70','#7e000c',
                                        '#a8004b','#a8008a','#bf00dc','#a000b8',
                                        '#5f00b8','#1e00b8','#0056d8','#0073c4',
                                        '#00b8c4','#006084','#007953','#00a973'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                        },
                        tooltip:{
                            position: function (pos, params, dom, rect, size) {
                                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                                var obj = {top: 80};
                                obj[['right', 'left'][+(pos[0] < size.viewSize[0] / 2)]] = 70;
                                return obj;
                            }
                        },
                        data:result.list,
                    }

                ]
            };


            myChart2.hideLoading();    //隐藏加载动画
            myChart2.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart2.hideLoading();
        }
    });


}



function f_body_top_left_third() {
    //设置第三个圆


    myChart3.showLoading();    //数据加载完之前先显示一段简单的loading动画


    $.ajax({
        type: 'get',
        url: 'json/data-center-body-top-first.json',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象


            var option = {
                title: {
                    text: '乡镇幅员面积',
                    x: 'center',
                    y: 'center',
                    textStyle : {
                        color : 'rgba(30,144,255,0.5)',
                        fontFamily : '微软雅黑',
                        fontSize : 14,
                        fontWeight : 'bolder',
                    }

                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                grid:{
                    show:false,
                    left:0,
                    right:-100,
                    top:'5%',
                    bottom:'5%',

                },
                calculable : true,
                series : [
                    {
                        name:'数据',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#b60000','#c16400','#004d70','#7e000c',
                                        '#a8004b','#a8008a','#bf00dc','#a000b8',
                                        '#5f00b8','#1e00b8','#0056d8','#0073c4',
                                        '#00b8c4','#006084','#007953','#00a973'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                        },
                        tooltip:{
                            position: function (pos, params, dom, rect, size) {
                                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                                var obj = {top: 80};
                                obj[['right', 'left'][+(pos[0] < size.viewSize[0] / 2)]] = 70;
                                return obj;
                            }
                        },
                        data:result.list,
                    }

                ]
            };


            myChart3.hideLoading();    //隐藏加载动画
            myChart3.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart3.hideLoading();
        }
    });

}


function  f_body_top_left_forth() {
    //设置第四个圆


    myChart4.showLoading();    //数据加载完之前先显示一段简单的loading动画

    $.ajax({
        type: 'get',
        url: 'json/data-center-body-top-first.json',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象


            var option = {
                title: {
                    text: '乡镇幅员面积',
                    x: 'center',
                    y: 'center',
                    textStyle : {
                        color : 'rgba(30,144,255,0.5)',
                        fontFamily : '微软雅黑',
                        fontSize : 14,
                        fontWeight : 'bolder',
                    }

                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                grid:{
                    show:false,
                    left:0,
                    right:-100,
                    top:'5%',
                    bottom:'5%',

                },
                calculable : true,
                series : [
                    {
                        name:'数据',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#b60000','#c16400','#004d70','#7e000c',
                                        '#a8004b','#a8008a','#bf00dc','#a000b8',
                                        '#5f00b8','#1e00b8','#0056d8','#0073c4',
                                        '#00b8c4','#006084','#007953','#00a973'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                        },
                        tooltip:{
                            position: function (pos, params, dom, rect, size) {
                                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                                var obj = {top: 80};
                                obj[['right', 'left'][+(pos[0] < size.viewSize[0] / 2)]] = 70;
                                return obj;
                            }
                        },
                        data:result.list,
                    }

                ]
            };


            myChart4.hideLoading();    //隐藏加载动画
            myChart4.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart4.hideLoading();
        }
    });

}


function f_body_top_right() {
    //设置图像右边折线图


    myChart5.showLoading();    //数据加载完之前先显示一段简单的loading动画
    var day = [];
    var number = [];

    $.ajax({
        type: 'get',
        url: 'json/data-center-body-top-right.json',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result.list, function (index, item) {
                day.push(item.day);    //挨个取出类别并填入类别数组
                number.push(item.number);    //挨个取出销量并填入销量数组
            });


            var option5 = {
                tooltip : {
                    trigger: 'axis',

                },
                color:['#FFE400'],
                grid:{
                    left:15,

                },
                legend: {
                    data:['意向','预购','成交'],
                    textStyle:{backgroundColor:'rgb(255,228,0)'},

                },
                calculable : true,
                xAxis : {
                    type : 'category',
                    boundaryGap : false,
                    data : day,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFE400'
                        }
                    }
                },
                yAxis : {
                    show:false,
                    splitLine:{
                        show:false,
                    }
                },
                series : [
                    {

                        type:'line',
                        smooth:true,		//曲线是否光滑
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},	//圆柱体的areStyle形式
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            origin:'auto',
                        },
                        data:number
                    }
                ],

            };
            myChart5.hideLoading();    //隐藏加载动画
            myChart5.setOption(option5);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart5.hideLoading();
        }
    });


}


//动态设置div的大小
$(window).resize(function () {
    var w = $(window).width();
    var h = $(window).height();
    var vmw = (965/1903)*w;
    var vlrw = (496/1903)*w;
    $(".container-fluid .header .header-middle").css({"width":vmw,"margin-left":vlrw-(35/1903)*w+"px"});

    $(".container-fluid .header .header-left .row").css("width",vlrw+"px");
    $(".container-fluid .header .header-right .row").css("width",vlrw +"px");
    $(".container-fluid .header .header-right .row").css("margin-left",vmw+vlrw-(72/1903)*w+"px");


    /*适配宽度*/

    $(".container-fluid .body .body-top-left").css("width",(514/1903)*w+"px");
    $(".container-fluid .body .body-top-middle").css("width",(650/1903)*w+"px");
    $(".container-fluid .body .body-top-right").css("width",(550/1903)*w+"px");

    /*适配高度*/
    $(".container-fluid .body .body-top").css("height",(651/1080)*h+"px");
    $(".container-fluid .body .body-down").css("height",(248/1080)*h+"px");

    $(".container-fluid .body .body-top-left").css("height",90+"%");
    $(".container-fluid .body .body-top-middle").css("height",90+"%");
    $(".container-fluid .body .body-top-right").css("height",90+"%");



    $(".container-fluid .body .body-down #data-center-bottom").css("width",(1797/1903)*w+"px");
    $(".container-fluid .body .body-down #data-center-bottom").css("height",(248/943)*h+"px");

    //适配圆形自动随着屏幕变化
    $(".container-fluid .body  .body-top #body-top-left-top-left").css("width",(250/1903)*w+"px");
    $(".container-fluid .body  .body-top #body-top-left-top-right").css("width",(250/1903)*w+"px");
    $(".container-fluid .body  .body-top #body-left-down-left").css("width",(250/1903)*w+"px");
    $(".container-fluid .body  .body-top #body-left-down-right").css("width",(250/1903)*w+"px");

    $(".container-fluid .body  .body-top #body-top-left-top-left").css("height",(150/1080)*h+"px");
    $(".container-fluid .body  .body-top #body-top-left-top-right").css("height",(150/1080)*h+"px");
    $(".container-fluid .body  .body-top #body-left-down-left").css("height",(150/1080)*h+"px");
    $(".container-fluid .body  .body-top #body-left-down-right").css("height",(150/1080)*h+"px");



    //适配右边搜索框的宽度
    $(".container-fluid .body .body-top-right .search").css("width",(500/1903)*w+"px");
    $(".body .body-top .body-top-right .body-top-right-top-input .search").css("width",(480/1903)*w+"px");


    //适配右边折线图的宽度
    $(".container-fluid .body .body-top-right #body-top-right-down-table").css("width",(500/1903)*w+"px");
    $(".container-fluid .body .body-top-right #body-top-right-down-table").css("height",(285/1080)*h+"px");

    myChart0.resize();
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
    myChart4.resize();
    myChart5.resize();
});
$(document).ready(function () {
    var w = $(window).width();
    var h = $(window).height();
    var vmw = (965/1903)*w;
    var vlrw = (496/1903)*w;
    $(".container-fluid .header .header-middle").css({"width":vmw,"margin-left":vlrw-(35/1903)*w+"px"});

    $(".container-fluid .header .header-left .row").css("width",vlrw+"px");
    $(".container-fluid .header .header-right .row").css("width",vlrw +"px");
    $(".container-fluid .header .header-right .row").css("margin-left",vmw+vlrw-(72/1903)*w+"px");


    /*适配宽度*/

    $(".container-fluid .body .body-top-left").css("width",(514/1903)*w+"px");
    $(".container-fluid .body .body-top-middle").css("width",(650/1903)*w+"px");
    $(".container-fluid .body .body-top-right").css("width",(550/1903)*w+"px");

    /*适配高度*/
    $(".container-fluid .body .body-top").css("height",(651/1080)*h+"px");
    $(".container-fluid .body .body-down").css("height",(248/1080)*h+"px");

    $(".container-fluid .body .body-top-left").css("height",90+"%");
    $(".container-fluid .body .body-top-middle").css("height",90+"%");
    $(".container-fluid .body .body-top-right").css("height",90+"%");



    $(".container-fluid .body .body-down #data-center-bottom").css("width",(1797/1903)*w+"px");
    $(".container-fluid .body .body-down #data-center-bottom").css("height",(248/943)*h+"px");

    //适配圆形自动随着屏幕变化
    $(".container-fluid .body  .body-top #body-top-left-top-left").css("width",(250/1903)*w+"px");
    $(".container-fluid .body  .body-top #body-top-left-top-right").css("width",(250/1903)*w+"px");
    $(".container-fluid .body  .body-top #body-left-down-left").css("width",(250/1903)*w+"px");
    $(".container-fluid .body  .body-top #body-left-down-right").css("width",(250/1903)*w+"px");

    $(".container-fluid .body  .body-top #body-top-left-top-left").css("height",(150/1080)*h+"px");
    $(".container-fluid .body  .body-top #body-top-left-top-right").css("height",(150/1080)*h+"px");
    $(".container-fluid .body  .body-top #body-left-down-left").css("height",(150/1080)*h+"px");
    $(".container-fluid .body  .body-top #body-left-down-right").css("height",(150/1080)*h+"px");



    //适配右边搜索框的宽度
    $(".container-fluid .body .body-top-right .search").css("width",(500/1903)*w+"px");
    $(".body .body-top .body-top-right .body-top-right-top-input .search").css("width",(480/1903)*w+"px");


    //适配右边折线图的宽度
    $(".container-fluid .body .body-top-right #body-top-right-down-table").css("width",(500/1903)*w+"px");
    $(".container-fluid .body .body-top-right #body-top-right-down-table").css("height",(285/1080)*h+"px");

    myChart0.resize();
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
    myChart4.resize();
    myChart5.resize();

});


